import React, { Component } from 'react';
import { Tooltip } from 'antd';
import '../less/index.less';
import { CheckOutlined, createFromIconfontCN } from '@ant-design/icons';

const Icon = createFromIconfontCN({ scriptUrl: 'public/icon/all.js' });

class BlockCheckbox extends Component {

  onChange = key => {
    if (this.props.onChange) {
      this.props.onChange(key);
    }
  }

  render() {
    const { value, list } = this.props;
    return (
      <div className='blockChecbox' value={value}>
        {list.map(item => (
          <Tooltip title={item.title} key={item.key}>
            <div className='item' onClick={() => this.onChange(item.key)}>
              <img src={item.url} alt={item.key}/>
              <div className='selectIcon' style={{ display: value === item.key ? 'block' : 'none' }}>
                <CheckOutlined/>
              </div>
            </div>
          </Tooltip>
        ))}
      </div>
    );
  }


}

export default BlockCheckbox;
